<div class="section">
  <div class="heading">
    <div class="title"><strong><code>.artice</code></strong></div>
  </div>
  <div class="box article">
    <p>如果要使得文本内容具有排版样式，请将 <code>p</code>、<code>h1</code>、<code>small</code> 等标签置于 <code>.article</code> 标签内。</p>
  </div>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>标题</strong></div>
  </div>
  <div class="box article">
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
  </div>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>重要段落</strong>：<code>.lead</code></div>
  </div>
  <div class="box article">
    <p class='lead'>这是一个重要的段落</p>
  </div>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>小号文本</strong>：<code>small</code> & <code>.small</code></div>
  </div>
  <div class="box article">
    <p class='small'>小号文本</p>
  </div>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>大号文本</strong>：<code>.large</code></div>
  </div>
  <div class="box article">
    <p class='large'>大号文本</p>
  </div>
</div>


<div class="section">
  <div class="heading">
    <div class="title"><strong>标记文本</strong>：<code>mark</code> & <code>.mark</code></div>
  </div>
  <div class="box article">
    <p>这段文本里面包含<mark>标记文本</mark>。</p>
  </div>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>链接</strong>：<code>.text-link</code></div>
  </div>
  <div class="box article">
    <p>这段文本里面包含<a class='text-link'>链接</a>。</p>
  </div>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>文本对齐</strong></div>
  </div>
  <div class="box article">
    <p class="text-left">水平向左对齐：<code>.text-left</code></p>
    <p class="text-right">水平向右对齐：<code>.text-right</code></p>
    <p class="text-center">水平居中对齐：<code>.text-center</code></p>
    <p class="text-justify hidden">水平两端对齐：<code>.text-justify</code></p>
    <p class="text-nowrap" style="overflow: hidden">禁用文本换行显示。这是一行非常非常非常长的文本，长到你可能不想全部看完。既然如此，不如仅仅显示你想看的，最后的内容再精彩也就看不到了。</p>
    <p class="text-ellipsis" style="overflow: hidden">在一行截断文本。这是一行非常非常非常长的文本，长到你可能不想全部看完。既然如此，不如仅仅显示你想看的，最后的内容再精彩也就看不到了。</p>
  </div>
</div>

<div class="section hidden">
  <div class="heading">
    <div class="title"><strong>大小写转换</strong></div>
  </div>
  <div class="box article">
    <p class="text-lowercase">小写：<code>.text-lowercase</code></p>
    <p class="text-uppercase">大写：<code>.text-uppercase</code></p>
    <p class="text-capitalize">首字母大写：<code>.text-capitalize</code></p>
  </div>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>删除线</strong></div>
  </div>
  <div class="box article">
    <p class="text-line-through">一些值得删除的内容<code>.text-line-through</code></p>
  </div>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>水平分割线</strong>：<code>hr</code> & <code>hr.space</code></div>
  </div>
  <div class="box article">
    <hr>
  </div>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>引用</strong>：<code>blockquote</code></div>
  </div>
  <div class="box article">
    <blockquote>高尔基同志说过：……（我忘了）</blockquote>
  </div>
</div>
